<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <div class="base-content-operate">
        <el-button
          v-rights="'Add'"
          icon="el-icon-plus"
          type="primary"
          @click="onNew"
          >新增评定项目</el-button
        >
      </div>
      <div>
        <el-table
          :data="list"
          element-loading-text="Loading"
          fit
          border
          :summary-method="getSummaries"
          show-summary
          style="width: 100%"
        >
          <el-table-column label="排序" width="50px">
            <template slot-scope="scope">
              {{ scope.row.sort }}
            </template>
          </el-table-column>
          <el-table-column label="项目类型" width="200px">
            <template slot-scope="scope">
              {{ scope.row.itemType }}
            </template>
          </el-table-column>
          <el-table-column label="分数上限" width="100px">
            <template slot-scope="scope">
              {{ scope.row.scoreLine }}
            </template>
          </el-table-column>
          <el-table-column label="评分标准">
            <template slot-scope="scope">
              <div>
                <el-row
                  v-for="item in scope.row.evaluationStandardList"
                  :key="item.id"
                >
                  <el-col>
                    <span>{{ item.sort + "、" + item.content }}</span>
                  </el-col>
                </el-row>
                <el-row v-if="scope.row.remark">
                  <el-col>
                    <span> 备注：{{ scope.row.remark }} </span>
                  </el-col>
                </el-row>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100px">
            <template slot-scope="scope">
              <div class="base-table-operation">
                <el-link
                  v-rights="'Update'"
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.row)"
                  >编辑</el-link
                >
                <el-link
                  v-rights="'Delete'"
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row)"
                  >删除</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <SysBusinessEvaluationItemEdit
      v-if="dialogFormVisible"
      :id.sync="id"
      ref="SysBusinessEvaluationItemEdit"
      :dialog-form-visible.sync="dialogFormVisible"
      @close="close"
    />
  </div>
</template>

<script>
import {
  deleteRecord,
  getList,
} from "../../../api/Evaluation/EvaluationItem.js";
import SysBusinessEvaluationItemEdit from "./EvaluationItemEdit.vue";

export default {
  name: "EvaluationItemList",
  components: { SysBusinessEvaluationItemEdit },
  data() {
    return {
      dialogFormVisible: false,
      loading: true,
      list: [],
      id: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    close() {
      this.id = "";
      this.getList();
    },
    getSummaries(param) {
      const { columns, data } = param;
      let val = 0;
      data.forEach((element) => {
        val = val + Number(element.scoreLine);
      });
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总分";
          return;
        }
        if (index === 2) {
          sums[index] = val;
        }
      });

      return sums;
    },
    getList() {
      getList().then((res) => {
        this.loading = false;
        this.list = res.data;
      });
    },
    onNew() {
      this.id = ""
      this.dialogFormVisible = true;
    },
    handleDelete(rowData) {
      this.Helper.deleteConfirm(() => {
        this.loading = true;
        deleteRecord({ id: rowData.id })
          .then((res) => {
            this.getList();
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    handleEdit(rowData) {
      this.id = rowData.id;
      this.dialogFormVisible = true;
    },
    onQuery() {
      this.getList();
    },
  },
};
</script>
